<template class="task-template">
  <section id="abp-cli-installation-section" class="section js-section u-category-abp-cli">
    <header class="section-header">
      <div class="section-wrapper">
        <h1>
          <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
          Abp CLI Installation
        </h1>
        <h3>ABP CLI is a dotnet global tool.</h3>
        <p>See the <a href="https://docs.abp.io/en/abp/latest/CLI#installation">ABP framework documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser for more informations.</p>
      </div>
    </header>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Install Abp CLI
          <div class="demo-meta u-avoid-clicks">Install dotnet global tool: Abp CLI</div>
        </button>
        <div id="box-abp-cli-cli-install" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>dotnet tool install -g Volo.Abp.Cli</code></pre>

          <h5>
            <button class="demo-button" id="cli-install-execute">Execute</button>
          </h5>

          <div id="cli-install-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Update Abp CLI
          <div class="demo-meta u-avoid-clicks">Update dotnet global tool: Abp CLI</div>
        </button>
        <div id="box-abp-cli-cli-update" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>dotnet tool update -g Volo.Abp.Cli</code></pre>

          <h5>
            <button class="demo-button" id="cli-update-execute">Execute</button>
          </h5>

          <div id="cli-update-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <div class="demo">
      <div class="demo-wrapper">
        <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">Uninstall Abp CLI
          <div class="demo-meta u-avoid-clicks">Uninstall dotnet global tool: Abp CLI</div>
        </button>
        <div id="box-abp-cli-cli-uninstall" class="demo-box">
          <h5 style="margin-top: 0;">Command</h5>
          <pre><code>dotnet tool uninstall -g Volo.Abp.Cli</code></pre>

          <h5>
            <button class="demo-button" id="cli-uninstall-execute">Execute</button>
          </h5>

          <div id="cli-uninstall-process" class="hidden">
            <h5>Command Line Process</h5>
            <textarea></textarea>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      require('./renderer-process/abp-cli/abp-cli-installation.js')
    </script>

  </section>
</template>
